<!DOCTYPE html>
<html>
<head>
    <!--本软件版权归www.magicalcoder.com所有，著作权人：何栋宇，qq:799374340;如果您觉得好，欢迎购买我们的专业离线版，支持互联网创业，支持原创，在国内营造一个良性的知识付费氛围，大家都是受益者，一次购买永久免费升级哦，本软件已获得软件著作权。-->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="shortcut icon" href="favicon.ico"/>
    <title>MagicalCoder表单设计器-可视化拖拽布局器</title>
    <meta name="description" content="MagicalDrag,layui表单设计,vue表单设计器,elementUi表单设计器,前端拖拽布局器,可视化拖拽布局器">
    <meta name="keywords" content="MagicalDrag,layui表单设计,vue表单设计器,elementUi表单设计器,前端拖拽布局器,可视化拖拽布局器">
    <!--统一开源免费图标字体-->
    <link href="assets/drag/js/lib/remixicon/remixicon.css" rel="stylesheet">
    <!--基于开源ztree的dom树插件-->
    <link rel="stylesheet" href="assets/drag/js/lib/ztree3/css/zTreeStyle/zTreeStyle.css" media="all">
    <!--layui样式-->
    <link href="assets/drag/layui-v2.4.5/layui/css/layui.css" rel="stylesheet">
    <link href="assets/drag/layui-v2.4.5/layui-ext.css" rel="stylesheet">
    <!--皮肤-->
    <link rel="stylesheet" href="assets/drag/css/skin/darcula.css">
    <link rel="stylesheet" href="assets/drag/css/skin/white.css">
    <!--MagicalCoder基础布局器界面样式-->
    <link href="assets/drag/css/magical-drag-all.css" rel="stylesheet">

</head>
<body class="magicalcoder-edit" style="">

<div id="magicalcoder-page-main">
    <div class="magicalcoder-page-header" >
        <div class="magicalcoder-page-title" title="MagicalCoder布局器">
            <!--<a style="color: #ffffe6" href="http://www.magicalcoder.com"></a>-->
        </div>
        <div class="magicalcoder-page-link">
            <span class="layui-form">
                <div class="layui-input-inline layui-form" style="width: 120px;height: 40px;">
                    <select  lay-filter="select-filter-top-change-skin">
                        <option value="mc-skin-darcula">暗黑</option>
                        <option value="mc-skin-white">自然</option>
                    </select>
                </div>
                <div class="layui-input-inline layui-hide" style="width: 120px;height: 40px;">
                </div>
            </span>
        </div>
    </div>
    <div class="magicalcoder-page-container">
        <div class="layui-row">
            <div class="layui-col-xs2 magicalcoder-hide-left-area">
                <!--左侧 做个能收展的-->
                <div class="layui-row" style="height: 100%;">
                    <div class="layui-col-xs12 el-aside" style="height: 60%;">
                        <!--左侧自定义组件列表-->
                        <div class="magicalcoder-left-config magicalcoder-page-drag-item-list"></div>
                    </div>
                    <div class="layui-col-xs12 el-aside" style="height: 40%;">
                        <!--结构树-->
                        <div id="magical_coder_ztree" class="ztree"></div>
                    </div>
                </div>
            </div>
            <div class="layui-col-xs8 magicalcoder-hide-center-area">
                <!--工作台-->
                <section class="el-container center-container is-vertical">
                    <header class="el-header btn-bar">
                        <div class="layui-row">
                            <div class="layui-col-lg4 layui-col-md4 layui-col-xs12">
                                <div class="el-radio-group">
                                    <label title="会把隐藏的元素以方框形式展示，更容易拖拽和选择元素" data-value="view" class="el-radio-button el-radio-button--small"><span class="el-radio-button__inner el-radio-group-label-active">视图</span></label>
                                    <label title="最大化的精简工作区域，无限接近最终作品" data-value="pretty" class="el-radio-button el-radio-button--small"><span class="el-radio-button__inner ">预览</span></label>
                                    <label title="您可以插入style样式" data-value="css" class="el-radio-button el-radio-button--small"><span class="el-radio-button__inner">样式</span></label>
                                    <label title="您可以插入html代码" data-value="code" class="el-radio-button el-radio-button--small"><span class="el-radio-button__inner">HTML</span></label>
                                    <label title="辅助源码的javascript脚本" data-value="javascript" class="el-radio-button el-radio-button--small"><span class="el-radio-button__inner">脚本</span></label>
                                </div>
                            </div>
                            <div class="layui-col-lg4 layui-col-md4 layui-col-xs12">
                                <div class="magicalcoder-header-tools">
                                    <button name="magical_coder_choose_parent_dom" type="button" class="el-button el-button--text el-button--medium"><i title="聚焦外层结构" class="layui-icon layui-icon-radio"></i></button>
                                    <button name="magical_coder_move_to_prev" type="button" class="el-button el-button--text el-button--medium"><i title="向前移动(Ctrl+ <-)" class="layui-icon layui-icon-up"></i></button>
                                    <button name="magical_coder_move_to_next" type="button" class="el-button el-button--text el-button--medium"><i title="向后移动(Ctrl+ ->)" class="layui-icon layui-icon-down"></i></button>
                                    <button name="magical_coder_undo" type="button" class="el-button el-button--text el-button--medium"><i title="撤销(Ctrl+Z)" class="layui-icon layui-icon-refresh-1"></i></button>
                                    <button name="magical_coder_redo" type="button" class="el-button el-button--text el-button--medium"><i title="重做(Ctrl+Y)" class="layui-icon layui-icon-refresh"></i></button>
                                </div>
                            </div>
                            <div class="layui-col-lg4 layui-col-md4 layui-col-xs12">
                                <div>
                                    <button id="magical_coder_clear" type="button" class="el-button el-button--text el-button--medium"><img class="iconfont" src="assets/drag/img/top/delete1.png"><span>重置</span></button>
                                    <button id="magical_coder_save" type="button" class="el-button el-button--text el-button--medium"><img class="iconfont" src="assets/drag/img/top/save1.png"><span>暂存</span></button>
                                </div>
                            </div>
                        </div>
                    </header>
                    <main class="magicalcoder-workground el-main widget-empty layui-form" lay-filter="magicalcoderDemoFilter">
                        <iframe id="dropInnerIframe" class="layui-hide" src="iframe-code-layui-2.5.4.html"></iframe>
                        <div id="magicalcoderCodeEdit" class="magicalcoder-demo-code magicalcoder-hide" style="font-size: 15px;height: 100%;">
                        </div>
                        <div id="magicalcoderJavascriptEdit" class="magicalcoder-demo-javascript magicalcoder-hide" style="font-size: 15px;height: 100%;">
                        </div>
                        <div id="magicalcoderCssEdit" class="magicalcoder-demo-css magicalcoder-hide" style="font-size: 15px;height: 100%;">
                        </div>
                    </main>
                    <footer class="el-footer">
                        <div class="magicalcoder-hide-area">
                            <!--右键菜单-->
                            <ul id="magicalcoderRightMenu" class="layui-table right-menu">
                            </ul>
                            <!--资源加载中-->
                            <div id="loading" class="layui-progress layui-progress-big" lay-filter="loadingFilter">
                                <div class="layui-progress-bar" lay-percent="99%"></div>
                            </div>
                            <!--样式工具箱-->
                            <div class="layui-fluid magical-coder-mstyle" style="display: none">
                            </div>
                            <!--ace 区域-->
                            <div id="aceHelperHideDiv" class="magicalcoder-hide" style="font-size: 15px;width:100%;height: 100%">
                            </div>
                        </div>
                    </footer>
                </section>
            </div>
            <div class="layui-col-xs2 magicalcoder-hide-right-area">
                <!--右侧 做个能收展的-->
                <aside class="el-aside magicalcoder-page-right-config-container">
                    <section class="el-container is-vertical layui-form" id="magicalcoder_right_side" lay-filter="rightConfigForm">
                        <header class="el-header" style="height: 45px;"></header>
                        <main class="el-main config-content demo-right-config"></main>
                    </section>
                </aside>
            </div>
        </div>
        <!--左右隐藏-->
        <!--<div class="magicalcoder-hide-left"><i class="layui-icon layui-icon-prev"></i></div>-->
        <div class="magicalcoder-hide-right"><i class="layui-icon layui-icon-next"></i></div>
    </div>
</div>
    <!--兼容性集成js-->
    <script type="text/javascript" src="assets/drag/js/lib/jscore.js"></script>
    <script type="text/javascript" src="assets/drag/js/lib/json3.js"></script>

    <script type='text/javascript' src="assets/drag/layui-v2.4.5/layui/layui.all.js"></script>
    <script type='text/javascript'>
        //省的再引入jquery
        var $=layui.jquery,jQuery=layui.jquery;
    </script>
    <script type="text/javascript" src="assets/drag/js/lib/redips/redips-table-source.js"></script>
    <!--[if IE 9]>
    <script type="text/javascript">
        alert("亲爱的用户，IE9无法使用拖拽操作，但是您可以通过点击左侧控件来加入工作区间，然后通过复制粘贴等快捷键来操作。推荐使用Chrome获取最佳体验")
    </script>
    <![endif]-->
    <!--[if lt IE 9]>
    <script type="text/javascript">
        alert("亲爱的用户，IE8及之前版本现已被互联网大部分网站抛弃，我们不再兼容。推荐使用Chrome获取最佳体验")
    </script>
    <![endif]-->
    <script type="text/javascript" src="assets/drag/js/min/magicalcoder-sn.js"></script>

    <!--ace开源编辑器-->
    <!--这个千万别引入啊 一旦引入 tab失效<script src="assets/drag/js/lib/ace-1.4.3/ext-emmet.js"></script>-->
 <!--   <script src="assets/drag/js/lib/ace-1.4.3/ace.js"></script>
    <script src="assets/drag/js/lib/ace-1.4.3/ace-extra.min.js"></script>-->
    <!--<script src="assets/drag/js/lib/ace-1.4.3/ext-beautify.js"></script>
    <script src="assets/drag/js/lib/ace-1.4.3/ext-elastic_tabstops_lite.js"></script>
    <script src="assets/drag/js/lib/ace-1.4.3/ext-error_marker.js"></script>
    <script src="assets/drag/js/lib/ace-1.4.3/ext-keybinding_menu.js"></script>
    <script src="assets/drag/js/lib/ace-1.4.3/ext-modelist.js"></script>
    <script src="assets/drag/js/lib/ace-1.4.3/ext-static_highlight.js"></script>
    <script src="assets/drag/js/lib/ace-1.4.3/ext-searchbox.js"></script>
    <script src="assets/drag/js/lib/ace-1.4.3/ext-language_tools.js"></script>
    <script src="assets/drag/js/lib/ace-1.4.3/mode-html.js"></script>
    <script src="assets/drag/js/lib/ace-1.4.3/worker-html.js"></script>
    <script src="assets/drag/js/lib/ace-1.4.3/mode-css.js"></script>
    <script src="assets/drag/js/lib/ace-1.4.3/worker-css.js"></script>
    <script src="assets/drag/js/lib/ace-1.4.3/mode-javascript.js"></script>
    <script src="assets/drag/js/lib/ace-1.4.3/worker-javascript.js"></script>
    <script src="assets/drag/js/lib/ace-1.4.3/theme-monokai.js"></script>
-->

    <!--dom树-->
    <script type="text/javascript" src="assets/drag/js/lib/ztree3/js/jquery.ztree.all.js"></script>

    <script type="text/javascript" src="assets/drag/js/code/lowcode-constant.js"></script>
    <script type="text/javascript" src="assets/drag/js/code/lowcode-util.js"></script>
    <script type="text/javascript" src="assets/drag/js/code/code-syntax-check.js"></script>
    <script type="text/javascript" src="assets/drag/js/code/code-translate.js"></script>
    <script type="text/javascript" src="assets/drag/js/code/magical-js-code.js"></script>
    <!--user相关代码-->
    <script type="text/javascript" src="assets/drag/js/user/application-env.js"></script>
    <script type="text/javascript" src="assets/drag/js/user/key.js"></script>
    <script type="text/javascript" src="assets/drag/js/user/api.js"></script>
    <script type="text/javascript" src="assets/drag/js/user/callback.js"></script>
    <script type="text/javascript" src="assets/drag/js/code/my-callback.js"></script>
    <script type="text/javascript" src="assets/drag/js/code/constant.js"></script>
    <script type="text/javascript" src="assets/drag/js/user/api-demo.js"></script>

    <script type="text/javascript" src="assets/drag/js/min/magical-coder-drag-all.js"></script>
</body>
</html>
